<template>
  <div class="home-page">
    <!-- 欢迎横幅 -->
    <div class="welcome-banner">
      <h1>欢迎使用数字档案系统</h1>
      <p>高效、安全、智能的档案管理平台，助力档案数字化转型</p>
    </div>

    <!-- 功能卡片区域 -->
    <div class="feature-cards">
      <div class="feature-card" @click="navigateTo('/archive-receive')">
        <div class="card-icon">
          <i class="el-icon-upload2"></i>
        </div>
        <h3>档案接收</h3>
        <p>上传新档案</p>
      </div>

      <div class="feature-card" @click="navigateTo('/archive-manage')">
        <div class="card-icon">
          <i class="el-icon-folder"></i>
        </div>
        <h3>档案管理</h3>
        <p>分类与编目</p>
      </div>

      <div class="feature-card" @click="navigateTo('/archive-search')">
        <div class="card-icon">
          <i class="el-icon-search"></i>
        </div>
        <h3>智能检索</h3>
        <p>快速查找档案</p>
      </div>

      <div class="feature-card" @click="navigateTo('/statistics')">
        <div class="card-icon">
          <i class="el-icon-data-analysis"></i>
        </div>
        <h3>数据统计</h3>
        <p>分析利用情况</p>
      </div>
    </div>

    <!-- 最近档案 -->
    <div class="recent-archives">
      <div class="section-header">
        <h2><i class="el-icon-document"></i> 最近档案</h2>
        <el-button type="text" @click="viewAll">查看全部 <i class="el-icon-arrow-right"></i></el-button>
      </div>

      <el-table :data="recentArchives" style="width: 100%">
        <el-table-column prop="name" label="档案名称" min-width="200">
          <template slot-scope="scope">
            <div class="archive-name">
              <i class="el-icon-document file-type-icon" :class="getFileTypeClass(scope.row.type)"></i>
              <div>
                <div class="file-name">{{ scope.row.name }}</div>
                <div class="file-meta">{{ scope.row.type.toUpperCase() }}, {{ scope.row.size }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="code" label="档案编号" width="150"></el-table-column>
        <el-table-column prop="category" label="分类" width="120">
          <template slot-scope="scope">
            <el-tag size="small" :type="getCategoryType(scope.row.category)">{{ scope.row.category }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="level" label="密级" width="100">
          <template slot-scope="scope">
            <el-tag size="small" :type="getLevelType(scope.row.level)">{{ scope.row.level }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="更新时间" width="150"></el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="viewArchive(scope.row)">
              <i class="el-icon-view"></i>
            </el-button>
            <el-button type="text" size="small" @click="downloadArchive(scope.row)">
              <i class="el-icon-download"></i>
            </el-button>
            <el-button type="text" size="small" @click="shareArchive(scope.row)">
              <i class="el-icon-share"></i>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      recentArchives: [
        {
          id: 1,
          name: '2023年度财务审计报告',
          type: 'pdf',
          size: '25.4MB',
          code: 'DA-2023-00456',
          category: '财务档案',
          level: '内部',
          updateTime: '2023-11-15'
        },
        {
          id: 2,
          name: '人事管理制度修订版',
          type: 'docx',
          size: '3.2MB',
          code: 'DA-2023-00789',
          category: '人事档案',
          level: '公开',
          updateTime: '2023-11-10'
        },
        {
          id: 3,
          name: '项目竣工图片集',
          type: 'jpg',
          size: '156.8MB',
          code: 'DA-2023-00321',
          category: '项目档案',
          level: '内部',
          updateTime: '2023-11-05'
        }
      ]
    }
  },
  methods: {
    navigateTo(path) {
      this.$router.push(path)
    },
    viewAll() {
      this.$router.push('/archive-manage')
    },
    getFileTypeClass(type) {
      const typeMap = {
        'pdf': 'pdf-icon',
        'docx': 'doc-icon',
        'jpg': 'img-icon'
      }
      return typeMap[type] || 'default-icon'
    },
    getCategoryType(category) {
      const typeMap = {
        '财务档案': 'warning',
        '人事档案': 'success',
        '项目档案': 'info'
      }
      return typeMap[category] || ''
    },
    getLevelType(level) {
      const typeMap = {
        '内部': 'warning',
        '公开': 'success',
        '机密': 'danger'
      }
      return typeMap[level] || ''
    },
    viewArchive(row) {
      console.log('查看档案:', row)
    },
    downloadArchive(row) {
      console.log('下载档案:', row)
    },
    shareArchive(row) {
      console.log('分享档案:', row)
    }
  }
}
</script>

<style scoped>
.home-page {
  padding: 0;
}

.welcome-banner {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 40px;
  margin-bottom: 30px;
  border-radius: 8px;
}

.welcome-banner h1 {
  font-size: 28px;
  margin: 0 0 10px 0;
  font-weight: 600;
}

.welcome-banner p {
  font-size: 16px;
  margin: 0;
  opacity: 0.9;
}

.feature-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

.feature-card {
  background: white;
  border-radius: 8px;
  padding: 30px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #e8e8e8;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.card-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
}

.feature-card:nth-child(1) .card-icon {
  background: linear-gradient(135deg, #667eea, #764ba2);
}

.feature-card:nth-child(2) .card-icon {
  background: linear-gradient(135deg, #f093fb, #f5576c);
}

.feature-card:nth-child(3) .card-icon {
  background: linear-gradient(135deg, #4facfe, #00f2fe);
}

.feature-card:nth-child(4) .card-icon {
  background: linear-gradient(135deg, #43e97b, #38f9d7);
}

.feature-card h3 {
  font-size: 18px;
  margin: 0 0 8px 0;
  color: #333;
}

.feature-card p {
  font-size: 14px;
  color: #666;
  margin: 0;
}

.recent-archives {
  background: white;
  border-radius: 8px;
  padding: 20px;
  border: 1px solid #e8e8e8;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-header h2 {
  font-size: 18px;
  margin: 0;
  color: #333;
  display: flex;
  align-items: center;
}

.section-header h2 i {
  margin-right: 8px;
  color: #409eff;
}

.archive-name {
  display: flex;
  align-items: center;
}

.file-type-icon {
  margin-right: 12px;
  font-size: 20px;
}

.pdf-icon {
  color: #ff4757;
}

.doc-icon {
  color: #2f5bea;
}

.img-icon {
  color: #26de81;
}

.default-icon {
  color: #747d8c;
}

.file-name {
  font-weight: 500;
  color: #333;
  margin-bottom: 2px;
}

.file-meta {
  font-size: 12px;
  color: #999;
}

.el-table {
  border: none;
}

.el-table th {
  background-color: #f8f9fa;
  color: #333;
  font-weight: 600;
}

.el-button--text {
  color: #409eff;
}

.el-button--text:hover {
  color: #66b1ff;
}
</style> 